<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农学院新闻数据可视化平台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.0.0/dist/echarts-wordcloud.min.js"></script>
     <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header">
        <img src="./img/logo.png" alt="">
        <div class="title">北京农学院新闻数据可视化平台
        </div>
        <div class="time-info" id="current-time">2025年10月15日 10:30:45</div>
    </div>
    
    <div class="dashboard">
        <!-- 统计数据 -->
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-icon">📊</div>
                <img src="./img/秋景4.png" alt="" height="500px">
                <div class="stat-label">总新闻数量</div>
                <div class="stat-value">1,248</div>
                <div class="stat-trend">↑ 5.2%</div>
            </div>
            <div class="stat-item">
                <div class="stat-icon">📰</div>
                <img src="./img/秋景1.png" alt="" height="500px">
                <div class="stat-label">今日发布</div>
                <div class="stat-value">23</div>
                <div class="stat-trend">↑ 12.3%</div>
            </div>
            <div class="stat-item">
                <div class="stat-icon">👁️</div>
                <img src="./img/秋景2.png" alt="" height="500px">
                <div class="stat-label">总点击量</div>
                <div class="stat-value">58,742</div>
                <div class="stat-trend">↑ 8.7%</div>
            </div>
            <div class="stat-item">
                <div class="stat-icon">📈</div>
                <img src="./img/秋景3.png" alt="" height="500px">
                <div class="stat-label">平均点击率</div>
                <div class="stat-value">47.1</div>
                <div class="stat-trend">↑ 2.4%</div>
            </div>
        </div>
        
        <!-- 词云图 -->
        <div class="card wordcloud-container">
            <div class="card-header">
                <div class="card-title">新闻关键词词云</div>
                <div class="card-tool">🔍</div>
            </div>
            <div id="wordcloud-chart" class="chart"></div>
        </div>
        
        <!-- 点击趋势图 -->
        <div class="card trend-container">
            <div class="card-header">
                <div class="card-title">新闻点击量趋势</div>
                <div class="card-tool">📅</div>
            </div>
            <div id="trend-chart" class="chart"></div>
        </div>
        
        <!-- 柱状图 -->
        <div class="card bar-container">
            <div class="card-header">
                <div class="card-title">各栏目新闻数量</div>
                <div class="card-tool">📊</div>
            </div>
            <div id="bar-chart" class="chart"></div>
        </div>
        
        <!-- 雷达图 -->
        <div class="card radar-container">
            <div class="card-header">
                <div class="card-title">新闻质量评估</div>
                <div class="card-tool">⭐</div>
            </div>
            <div id="radar-chart" class="chart"></div>
        </div>
        
        <!-- 新闻分类分布 -->
        <div class="card category-container">
            <div class="card-header">
                <div class="card-title">新闻分类分布</div>
                <div class="card-tool">📋</div>
            </div>
            <div id="category-chart" class="chart"></div>
        </div>
        
        <!-- 散点图 -->
        <div class="card scatter-container">
            <div class="card-header">
                <div class="card-title">新闻点击量与发布时间关系</div>
                <div class="card-tool">⏰</div>
            </div>
            <div id="scatter-chart" class="chart"></div>
        </div>
        
        <!-- 最新动态 -->
        <div class="card news-container">
            <div class="card-header">
                <div class="card-title">最新新闻动态</div>
                <div class="card-tool pulse">🔄</div>
            </div>
            <div class="news-list" id="news-list">
                <!-- 新闻列表将通过JS动态生成 -->
            </div>
        </div>
    </div>
    
    <div class="footer">
        农学院新闻数据可视化平台 © 2023 | 数据更新时间: <span id="update-time">2023-11-15 10:30:45</span>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>